<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        text-align: center;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <table id="app">
      <thead>
        <tr>
          <th>欢迎光临-vue开发的收银系统-水果店</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>苹果10￥/斤，折扣< 8折 ></td>
        </tr>
        <tr>
          <!-- 将input与total进行绑定 -->
          <td>请输入你要买的斤数<input type="text" v-model="num" /></td>
        </tr>
        <tr>
          <!-- 给button标签注册点击事件 -->
          <td><button @click="fn">结账买单</button></td>
        </tr>
        <tr>
          <!-- 将计算结果输出到页面中 -->
          <td>
            结账单：总价{{total}} 元 折后价：{{total*0.8}} 元
            省了：{{total*0.2}} 元
          </td>
        </tr>
      </tbody>
    </table>
    <script src="../day02-准备代码/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          num: '',
          total: 0
        },
        methods: {
          fn() {
            this.total = this.num * 10
          }
        }
      })
    </script>
  </body>
</html>
